<script setup>
  import { ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'

  import PayBox from '../../components/PayBox.vue'
  const createOrderUrl = ref('createBoxOrder_special')

  // 创建 Store 实例

  const bginfo = ref('pink-bg')
  const cardsnum = ref()
  const boxId = ref()
  const pay_type = ref()
  const caseId = ref()
  // 优惠Id
  const couponId = ref(0)
  const couponname = ref('')

  const paymoney = ref()
  const haveDraw = ref()
  const drawName = ref()
  const drawImg = ref()
  const energy_info = ref(null)

  function backto() {
    uni.navigateBack({ delta: 1 })
  }

  const secondTimer = ref()

  function goRealName() {
    namepopup.value.open('center')
    uni.navigateTo({
      url: '/minePage/authentication/index',
    })
  }
  const namepopup = ref()

  async function payReturnFun(res) {
    secondShow.value = false
    // console.log(res)
    setTimeout(() => {
      payAgain.value = true
    }, 2000)
    if (res.st == 1) {
      showAgainFun(res)
    } else if (res.st == -2) {
      namepopup.value.open('center')
    } else {
      uni.utils.toast(res.msg)
      setTimeout(() => {
        backto()
      }, 3000)
    }
    //
  }

  function showAgainFun(res) {
    paypopup.value.close()
    secondShow.value = true
    haveDraw.value = res.data.box_goods
    energy_info.value = res.data.energy_info
  }
  // 支付
  const paypopup = ref()
  // 优惠券之后的价格
  const realmoney = ref()
  const buyCount = ref(0)
  const agree = ref(true)
  const payAgain = ref(false)
  async function payPOP() {
    if (payAgain.value) {
      payAgain.value = false
      // await getUserMoney()
      secondShow.value = false
      // secondShow.value = false
      // 每次点击重新选择优惠券
      realmoney.value = paymoney.value
      couponId.value = 0
      couponname.value = ''
      paypopup.value.open('bottom')
    } else {
      uni.utils.toast('让手指放松下吧，请两秒后重试~')
    }
  }
  function changePop(e) {
    // console.log(e)
    if (!e.show) {
      setTimeout(() => {
        payAgain.value = true
      }, 1200)
    }
  }
  function changeAgree() {
    agree.value = !agree.value
  }

  function radioChange(evt) {
    pay_type.value = evt.detail.value
  }

  // 获取订单id
  const orderId = ref()

  // 微信支付
  //轮询微信支付订单状态
  const timeStatu = ref(true)
  const paying = ref(1)

  //支付抽卡
  const secondShow = ref(true)

  // 用户信息星石(暂时)
  const balance = ref(0)
  const preferential = ref()

  // 选择优惠券
  function chooseCoupon() {
    uni.navigateTo({
      url: `/drawPage/choosecoupon/index?money=${paymoney.value}&id=${boxId.value}&couponid=${couponId.value}`,
    })
  }

  function goRule(id) {
    uni.navigateTo({
      url: `/homePage/agreement/index?id=${id}`,
    })
  }

  onLoad((option) => {
    payAgain.value = false
    setTimeout(() => {
      payAgain.value = true
    }, 2000)
    secondShow.value = true
    cardsnum.value = option.num
    boxId.value = option.id
    pay_type.value = option.pay_type
    caseId.value = option.case_id
    paymoney.value = option.money
    drawName.value = option.name
    drawImg.value = option.img
    couponId.value = option.couponid
    haveDraw.value = JSON.parse(decodeURIComponent(option.thecard))
    if (haveDraw.value) {
    }
  })

  onShow(() => {
    uni.$once('thecoupon', (data) => {
      // console.log(data)
      realmoney.value = paymoney.value
      if (data.coupon) {
        couponId.value = data.coupon.id
        couponname.value = data.coupon.title
        // 满减
        if (data.coupon.type == 1) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 2) {
          realmoney.value = Number(
            (paymoney.value - data.coupon.money).toFixed(2)
          )
        } else if (data.coupon.type == 3) {
          realmoney.value = Number(
            (paymoney.value * data.coupon.discount).toFixed(2)
          )
        }
      }
    })
  })
</script>

<template>
  <view class="cards-content">
    <view class="congratulation" :class="{ 'second-scroll': secondShow }">
    </view>
    <view class="cards">
      <!-- 单抽 -->
      <view v-if="cardsnum == 1" class="one-draw">
        <view class="card-item" style="width: 393rpx; height: 465rpx">
          <view
            class="card-front tx-card-bg"
            style="width: 393rpx; height: 465rpx"
            :class="{
              'second-rotate-content': secondShow,
            }"
          >
          </view>
          <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
          </view>
          <!-- <view class="card-png" :style="'background:url(' + chuanshuo+')'">
					</view> -->
          <image
            class="card-content"
            :class="{ 'second-rotate-content': secondShow }"
            :src="haveDraw[0].img"
            style="height: 330rpx"
            mode="heightFix"
          ></image>
        </view>
      </view>
      <!-- 三抽 -->
      <view v-else-if="cardsnum == 3" class="three-draw">
        <view class="card-item-top">
          <view class="card-item" style="width: 283rpx; height: 336rpx">
            <view
              class="card-front tx-card-bg"
              style="width: 283rpx; height: 336rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[0].img"
              style="height: 230rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
        <view class="card-item-bottom">
          <view
            class="card-item"
            style="width: 283rpx; height: 336rpx; margin-right: 50rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 283rpx; height: 336rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[1].img"
              style="height: 230rpx"
              mode="heightFix"
            ></image>
          </view>
          <view class="card-item" style="width: 283rpx; height: 336rpx">
            <view
              class="card-front tx-card-bg"
              style="width: 283rpx; height: 336rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view class="card-bg" :class="{ 'second-rotate-bg': secondShow }">
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[2].img"
              style="height: 230rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
      </view>
      <!-- 十抽 -->
      <view v-else-if="cardsnum == 10" class="ten-draw">
        <view class="ten-draw-top">
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[1].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[4].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view class="card-item" style="width: 200rpx; height: 230rpx">
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[7].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
        <view class="ten-draw-center">
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[0].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[3].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[6].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view class="card-item" style="width: 200rpx; height: 230rpx">
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[9].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
        <view class="ten-draw-bottom">
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[2].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view
            class="card-item"
            style="width: 200rpx; height: 230rpx; margin-bottom: 45rpx"
          >
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[5].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
          <view class="card-item" style="width: 200rpx; height: 230rpx">
            <view
              class="card-front tx-card-bg"
              style="width: 200rpx; height: 230rpx"
              :class="{
                'second-rotate-content': secondShow,
              }"
            >
            </view>
            <view
              class="card-bg"
              :class="{ 'second-rotate-bg': secondShow }"
              style="width: 200rpx; height: 230rpx"
            >
            </view>
            <image
              class="card-content"
              :class="{ 'second-rotate-content': secondShow }"
              :src="haveDraw[8].img"
              style="height: 156rpx"
              mode="heightFix"
            ></image>
          </view>
        </view>
      </view>
    </view>
    <view class="button-bottom">
      <view class="button" @click="backto">
        开心收下
        <view v-if="energy_info" class="energy_txt"
          >额外获得能量球：{{ energy_info.name }}
        </view>
        <image
          v-if="energy_info"
          class="energy_img"
          :src="energy_info.img"
          mode=""
        ></image>
      </view>
      <view class="button" @click="payPOP"> 再来一次 </view>
    </view>

    <!-- 支付弹出层 -->
    <uni-popup ref="paypopup" type="bottom" @change="changePop">
      <PayBox
        v-if="!secondShow"
        :couponname="couponname"
        :createOrderUrl="createOrderUrl"
        :realmoney="realmoney"
        :paymoney="paymoney"
        :couponId="couponId"
        :case_id="caseId"
        :buyCount="cardsnum"
        :blindboxId="boxId"
        @payReturnFun="payReturnFun"
        @chooseCoupon="chooseCoupon"
        :boxDetailInfo="{ img: drawImg, name: drawName, pay_type: 1 }"
      ></PayBox>
    </uni-popup>
    <!-- 实名制出层 -->
    <uni-popup ref="namepopup" type="center">
      <view class="namepopup-content">
        <view class="namepopup-title"> 提示 </view>
        <view class="namepopup-content-tow">
          鉴于您是平台的优质用户，为了能给您提供更好的服务体验，请先完成实名制认证。</view
        >
        <view class="namepopup-button">
          <view class="" @click="namepopup.close('center')"> 再想一下 </view>
          <view class="" @click="goRealName"> 确认实名 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
  // 卡片背景
  .tx-card-bg {
    background: url('https://ojqn.wm2177.com/wechat_imgs/tx-card-bg.png')
      no-repeat;
    background-size: contain;
  }
  // 传说
  .chuan-shuo {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SSR.png')
      no-repeat;
    background-size: contain;
  }
  // 稀有
  .xi-you {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/SR.png')
      no-repeat;
    background-size: contain;
  }
  // 普通
  .normal {
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/R.png')
      no-repeat;
    background-size: contain;
  }
  //重复动画
  .second-rotate-content {
    animation: rotateOnce 0.8s ease-out forwards;
  }
  .second-rotate-bg {
    animation: rotateBg 0.8s ease-out forwards;
  }
  .second-top-display {
    animation: displayTop 2s ease-out forwards 2s;
  }
  .second-scroll {
    animation: scroll-left 1s ease-out forwards;
  }
  /* 定义旋转动画 */
  @keyframes rotateOnce {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }

  @keyframes displayTop {
    from {
      opacity: 0;
      // display: none;
    }
    to {
      opacity: 1;
      // display: block;
    }
  }
  @keyframes rotateBg {
    0% {
      transform: rotateY(0deg);
    }
    25% {
      transform: rotateY(90deg);
    }
    50% {
      transform: rotateY(180deg);
    }
    75% {
      transform: rotateY(270deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  @keyframes scroll-left {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
  .draw-video {
    position: relative;
    height: 100vh;
    width: 100%;
    video {
      height: 100%;
      width: 100%;
    }
    .skipvideo {
      width: 215rpx;
      height: 65rpx;
      background: url('https://ojqn.wm2177.com/wechat_imgs/skipvideo.png')
        no-repeat;
      background-size: contain;
      position: absolute;
      top: 200rpx;
      right: 0;
    }
    ::v-deep #myVideo::-webkit-media-controls {
      display: none !important;
    }
  }
  .cards-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    width: 100%;
    padding-top: 170rpx;
    padding-bottom: 150rpx;
    box-sizing: border-box;
    // background-image: linear-gradient(
    //   to bottom,
    //   #f8ec8a 1%,
    //   #f9ed8b 5%,
    //   #ffefff 36%,
    //   #eaf7ff 70%,
    //   #ffffff 100%
    // );
    background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/cards-ouhuangbg.png')
      no-repeat;
    background-size: 100%;
    .congratulation {
      height: 150rpx;
      width: 100%;
      background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/congratulation.png')
        no-repeat;
      background-size: contain;
      // animation: scroll-left 1s ease-out forwards;
    }
    .cards {
      flex: 1;
      .one-draw {
        // position: relative;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        margin-top: 230rpx;
        .card-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .card-front {
            position: absolute;
            top: 0;
            left: 0;
            width: 393rpx;
            height: 465rpx;
            z-index: 1;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
          .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 393rpx;
            height: 465rpx;
            // z-index: -1;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
              no-repeat;
            background-size: contain;
            // backface-visibility: hidden;
            // animation: rotateBg 2s ease-out forwards;
          }
          .card-content {
            position: absolute;
            // top: 0;
            // left: 0;
            z-index: 2;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
          .card-png {
            position: absolute;
            top: 0;
            left: 0;
            width: 393rpx;
            height: 465rpx;
            z-index: 2;
            background-size: contain !important;
            background-repeat: no-repeat !important;
          }
        }
      }
      .three-draw {
        // position: relative;
        // display: flex;
        // align-items: center;
        // justify-content: center;
        margin-top: 81rpx;
        .card-item-top {
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 44rpx;
        }
        .card-item-bottom {
          display: flex;
          align-items: center;
        }
        .card-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .card-front {
            position: absolute;
            top: 0;
            left: 0;
            width: 283rpx;
            height: 336rpx;
            z-index: 1;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
          .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 283rpx;
            height: 336rpx;
            // z-index: -1;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
              no-repeat;
            background-size: contain;
            // backface-visibility: hidden;
            // animation: rotateBg 2s ease-out forwards;
          }
          .card-content {
            position: absolute;
            // top: 0;
            // left: 0;
            z-index: 2;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
        }
      }
      .five-draw {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 130rpx;
        .five-draw-top {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 15rpx;
        }
        .five-draw-center {
          margin-right: 15rpx;
        }
        .five-draw-bottom {
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        .card-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .card-front {
            position: absolute;
            top: 0;
            left: 0;
            width: 220rpx;
            height: 270rpx;
            z-index: 1;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
          .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            // width: 283rpx;
            // height: 336rpx;
            // z-index: -1;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
              no-repeat;
            background-size: contain;
            // backface-visibility: hidden;
            // animation: rotateBg 2s ease-out forwards;
          }
          .card-content {
            position: absolute;
            // top: 0;
            // left: 0;
            z-index: 2;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
        }
      }
      .ten-draw {
        // position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .ten-draw-top {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin-right: 15rpx;
        }
        .ten-draw-center {
          margin-right: 15rpx;
        }
        .ten-draw-bottom {
          display: flex;
          align-items: center;
          flex-direction: column;
        }
        .card-item {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          .card-front {
            position: absolute;
            top: 0;
            left: 0;
            width: 220rpx;
            height: 270rpx;
            z-index: 1;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
          .card-bg {
            position: absolute;
            top: 0;
            left: 0;
            // width: 283rpx;
            // height: 336rpx;
            // z-index: -1;
            background: url('https://ojqn.wm2177.com/wechat_imgs/newdesign/card-bg3.png')
              no-repeat;
            background-size: contain;
            // backface-visibility: hidden;
            // animation: rotateBg 2s ease-out forwards;
          }
          .card-content {
            position: absolute;
            // top: 0;
            // left: 0;
            z-index: 2;
            backface-visibility: hidden;
            // animation: rotateOnce 2s ease-out forwards;
          }
        }
      }
    }
    .button-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 98rpx;
      .energy_txt {
        text-align: center;
        width: 100%;
        position: absolute;
        top: 80rpx;
        font-size: 26rpx;
        color: #902500;
      }
      .energy_img {
        position: absolute;
        font-weight: 900;
        text-align: center;
        width: 80rpx;
        height: 80rpx;
        position: absolute;
        top: -20rpx;
        left: -20rpx;
      }
      .button {
        height: 100%;
        width: 302rpx;
        font-size: 38rpx;
        font-weight: 900;
        text-align: center;
        line-height: 90rpx;
        position: relative;
        &:first-child {
          background: url('https://ojqn.wm2177.com/wechat_imgs/btn-left.png')
            no-repeat;
          background-size: contain;
          margin-right: 50rpx;
          color: #9146a0;
        }
        &:last-child {
          background: url('https://ojqn.wm2177.com/wechat_imgs/btn-right.gif')
            no-repeat;
          background-size: contain;
          color: #7c4600;
        }
      }
    }
  }
  .namepopup-content {
    width: 600rpx;
    height: 404rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    border-radius: 36rpx;
    background-color: #fff;
    .namepopup-title {
      height: 114rpx;
      border-bottom: 1px solid #d8d8d8;
      text-align: center;
      font-size: 40rpx;
      line-height: 114rpx;
      color: black;
    }
    .namepopup-content-tow {
      height: 164rpx;
      padding-top: 32rpx;
      box-sizing: border-box;
      text-align: center;
      font-size: 28rpx;
      color: #9b9b9d;
    }
    .namepopup-button {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: white;
      // margin-top: 26rpx;
      view {
        width: 234rpx;
        height: 80rpx;
        background-color: $all-color;
        border-radius: 40rpx;
        text-align: center;
        font-size: 26rpx;
        font-weight: 700;
        line-height: 80rpx;
        &:first-child {
          border: 2rpx solid $all-color;
          background-color: #fff;
          color: $all-color;
        }
      }
    }
  }
</style>
